iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 22
4
Modern Web

Angular 2 之 30 天邁向神乎其技之路系列 第 22

[Day 22] Angular 2 + Ionic = Mobile App ( 2 ) 建構

  • 分享至 

  • xImage
  •  

上一篇已經介紹 Ionic 搭配 Angular 2 是甚麼了,接下來就來介紹如何建構一個 App。

安裝

首先要確定 Node.js 有安裝

接者安裝 Cordova,Cordova 是跨平台底層的架構

npm install -g cordova

如果是 Linux 記得加上 sudo

安裝 Ionic CLI

npm install -g ionic

如果之前有失敗或是有安裝過之前的版本,可以 npm uninstall -g ionic 然後再重裝一次。安裝到最新版之後,如果以前有用 Ionic V1 仍然可以正常運作喔!兩個版本兼容的概念。

接著可以檢查一下安裝結果

ionic info

因為 Angular 2 是用 TypeScipt 來開發,所以也要安裝 TypeScript

npm install -g typescript

Hello Ionic

Ionic 2 提供一個快速建立專案的範本,當然也可以上網找其他人的範本的來使用。

ionic start myIonic2App tutorial --v2
  • start:建立新專案
  • myIonic2App:專案名稱,可自訂
  • tutorial:開始用的範本,可以在這邊參考其他模板
  • --v2:代表用 V2 開發,如果你想用 Angular 1 開發就不用加。
    這樣 App 的基礎建置就完成囉,當然之後還要再加入很多東西才算是完整的 App。

接著先進入資料夾,然後啟動虛擬伺服器,來執行看看我們的 App,我們會先用瀏覽器模擬 App 畫面,比起手機模擬器來說快多了,不用像開發 Native App 一樣,每改動一次都要編譯等好久。

cd myIonic2App
ionic serve

你會被問如何 serve,選 localhost:8100,然後應該會自動起動瀏覽器到 http://localhost:8100,如果沒有就手動輸入。

如果是用 Chrome,按 F12 開啟開發者工具,可以切換成手機瀏覽模式,還可以選擇機款模擬,像這邊就選 iPhone6

Chrome 開發模式下看到的樣子會長這樣

如果想一次看所有平台上的 App 模樣,可以輸入

ionic serve -l

就會長這樣

好囉,所以預備動作都完成啦!這樣就可以來開發了 :)

Ionic 2 專案架構

先來看看 Ionic 2 的專案架構

├── config.xml
├── hooks
├── ionic.config.json
├── node_modules
├── package.json
├── platforms
├── plugins
├── resources
├── src
├── tsconfig.json
├── tslint.json
  • config.xml: App 名稱、App 版本、一些設定值等等
  • hooks: 加入自己寫的 Native Code
  • platforms: 建立 Android、IOS 輸出平台
  • plugins: Cordova 可以加入 Native Code 的 Plugin
  • resources: 包含一些資源,像是 App 圖示、啟動圖片之類的
  • src: 我們寫的所有 code 幾乎都會在這裡,概念跟 Angular CLI 很像,之後會被輸出到 WWW 資料夾

Ionic App 建構的部分就到這邊啦!
明天要討論如何開始用 Angular 2 來做開發囉!


上一篇
[Day 21] Angular 2 + Ionic = Mobile App ( 1 ) 介紹
下一篇
[Day 23] Angular 2 + Ionic = Mobile App ( 3 ) 實作 Todo List
系列文
Angular 2 之 30 天邁向神乎其技之路31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
tommy_lu1
iT邦新手 5 級 ‧ 2017-07-25 15:16:23

現在已經不支援
ionic start myIonic2App tutorial --v2
改為
ionic start myIonic2App tutorial --type=ionic-angular

(--type=ionic-angular為預設可不輸入,如需要v1版,則輸入--type=ionic1)

微中子 iT邦新手 4 級 ‧ 2017-07-25 16:35:24 檢舉

恩 的確
他改動太頻繁了
語法整套都變了
建議直接去 Ionic 官網看最新的語法

我要留言

立即登入留言